$transtion-type: ease-in-out 0.6s;

.base {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  .container {
    cursor: pointer;
  }
  .mode {
    color: var(--theme-colors-monochrome-9);
    display: inline-block;
    padding-left: 10px;
    vertical-align: middle;
  }
}
.toggler {
  border: none;
  border-radius: 50%;
  display: inline-block;
  height: 20px;
  vertical-align: middle;
  width: 20px;
}
.base.iconOnly {
  .mode {
    display: none;
  }
}
.system {
  background-color: gold;
  border-color: black gold gold black;
  border-radius: 10px;
  border-style: solid;
  border-width: 10px;
}
.light {
  background-color: gold;
  border-color: gold;
  border-radius: 10px;
  border-style: solid;
  border-width: 10px;
}
.dark {
  background-color: black;
  box-shadow: inset -4.5px -4px 1px 1px gold;
}
